<nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white">
  <div class="container-fluid">

    <!-- Toggler -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebarCollapse" aria-controls="sidebarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Brand -->
    <a class="navbar-brand" href="index.html">
      <img src="assets/img/logo.svg" class="navbar-brand-img 
      mx-auto" alt="...">
    </a>

    <!-- User (xs) -->
    <div class="navbar-user d-md-none">

      <!-- Dropdown -->
      <div class="dropdown">
        
        <!-- Toggle -->
        <a href="#!" id="sidebarIcon" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <div class="avatar avatar-sm avatar-online">
            <img src="assets/img/avatars/profiles/avatar-1.jpg" class="avatar-img rounded-circle" alt="...">
          </div>
        </a>

        <!-- Menu -->
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="sidebarIcon">
          <a href="profile-posts.html" class="dropdown-item">Profile</a>
          <a href="settings.html" class="dropdown-item">Settings</a>
          <hr class="dropdown-divider">
          <a href="sign-in.html" class="dropdown-item">Logout</a>
        </div>

      </div>

    </div>

    <!-- Collapse -->
    <div class="collapse navbar-collapse" id="sidebarCollapse">

      <!-- Form -->
      <form class="mt-4 mb-3 d-md-none">
        <div class="input-group input-group-rounded input-group-merge">
          <input type="search" class="form-control form-control-rounded form-control-prepended" placeholder="Search" aria-label="Search">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <span class="fe fe-search"></span>
            </div>
          </div>
        </div>
      </form>
      
      <!-- Navigation -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link @@if(page=='index.html'){active}" href="index.html">
            <i class="fe fe-home"></i> Dashboard
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sidebarPages" data-toggle="collapse" role="button" aria-expanded="@@if(category=='pages'){true}@@if(category!=='pages'){false}" aria-controls="sidebarPages">
            <i class="fe fe-file"></i> Pages
          </a>
          <div class="collapse @@if(category=='pages'){show}" id="sidebarPages">
            <ul class="nav nav-sm flex-column">
              <li class="nav-item">
                <a href="#sidebarProfile" class="nav-link" data-toggle="collapse" role="button" aria-expanded="@@if(subcategory=='profile'){true}@@if(subcategory!=='profile'){false}" aria-controls="sidebarProfile">
                  Profile
                </a>
                <div class="collapse @@if(subcategory=='profile'){show}" id="sidebarProfile">
                  <ul class="nav nav-sm flex-column">
                    <li class="nav-item">
                      <a href="profile-posts.html" class="nav-link @@if(page=='profile-posts.html'){active}">
                        Posts
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="profile-groups.html" class="nav-link @@if(page=='profile-groups.html'){active}">
                        Groups
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="profile-projects.html" class="nav-link @@if(page=='profile-projects.html'){active}">
                        Projects
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="profile-files.html" class="nav-link @@if(page=='profile-files.html'){active}">
                        Files
                      </a>
                    </li>
                      <li class="nav-item">
                      <a href="profile-subscribers.html" class="nav-link @@if(page=='profile-subscribers.html'){active}">
                        Subscribers
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="nav-item">
                <a href="#sidebarProject" class="nav-link" data-toggle="collapse" role="button" aria-expanded="@@if(subcategory=='project'){true}@@if(subcategory!=='project'){false}" aria-controls="sidebarProject">
                  Project
                </a>
                <div class="collapse @@if(subcategory=='project'){show}" id="sidebarProject">
                  <ul class="nav nav-sm flex-column">
                    <li class="nav-item">
                      <a href="project-overview.html" class="nav-link @@if(page=='project-overview.html'){active}">
                        Overview
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="project-files.html" class="nav-link @@if(page=='project-files.html'){active}">
                        Files
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="project-reports.html" class="nav-link @@if(page=='project-reports.html'){active}">
                        Reports
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="project-new.html" class="nav-link @@if(page=='project-new.html'){active}">
                        New project <span class="badge badge-soft-success ml-auto">New</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="nav-item">
                <a href="#sidebarTeam" class="nav-link" data-toggle="collapse" role="button" aria-expanded="@@if(subcategory=='team'){true}@@if(subcategory!=='team'){false}" aria-controls="sidebarTeam">
                  Team
                </a>
                <div class="collapse @@if(subcategory=='team'){show}" id="sidebarTeam">
                  <ul class="nav nav-sm flex-column">
                    <li class="nav-item">
                      <a href="team-overview.html" class="nav-link @@if(page=='team-overview.html'){active}">
                        Overview
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="team-projects.html" class="nav-link @@if(page=='team-projects.html'){active}">
                        Projects
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="team-members.html" class="nav-link @@if(page=='team-members.html'){active}">
                        Members
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="team-new.html" class="nav-link @@if(page=='team-new.html'){active}">
                        New team <span class="badge badge-soft-success ml-auto">New</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="nav-item">
                <a href="orders.html" class="nav-link @@if(page=='orders.html'){active}">
                  Orders <span class="badge badge-soft-success ml-auto">New</span>
                </a>
              </li>
              <li class="nav-item">
                <a href="feed.html" class="nav-link @@if(page=='feed.html'){active}">
                  Feed
                </a>
              </li>
              <li class="nav-item">
                <a href="settings.html" class="nav-link @@if(page=='settings.html'){active}">
                  Settings
                </a>
              </li>
              <li class="nav-item">
                <a href="invoice.html" class="nav-link @@if(page=='invoice.html'){active}">
                  Invoice <span class="badge badge-soft-success ml-auto">New</span>
                </a>
              </li>
              <li class="nav-item">
                <a href="pricing.html" class="nav-link @@if(page=='pricing.html'){active}">
                  Pricing <span class="badge badge-soft-success ml-auto">New</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sidebarAuth" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarAuth">
            <i class="fe fe-user"></i> Authentication
          </a>
          <div class="collapse" id="sidebarAuth">
            <ul class="nav nav-sm flex-column">
              <li class="nav-item">
                <a href="#sidebarSignIn" class="nav-link" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarSignIn">
                  Sign in
                </a>
                <div class="collapse" id="sidebarSignIn">
                  <ul class="nav nav-sm flex-column">
                    <li class="nav-item">
                      <a href="sign-in-cover.html" class="nav-link">
                        Cover
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="sign-in-illustration.html" class="nav-link">
                        Illustration
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="sign-in.html" class="nav-link">
                        Basic
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="nav-item">
                <a href="#sidebarSignUp" class="nav-link" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarSignUp">
                  Sign up
                </a>
                <div class="collapse" id="sidebarSignUp">
                  <ul class="nav nav-sm flex-column">
                    <li class="nav-item">
                      <a href="sign-up-cover.html" class="nav-link">
                        Cover
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="sign-up-illustration.html" class="nav-link">
                        Illustration
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="sign-up.html" class="nav-link">
                        Basic
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="nav-item">
                <a href="#sidebarPassword" class="nav-link" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarPassword">
                  Password reset
                </a>
                <div class="collapse" id="sidebarPassword">
                  <ul class="nav nav-sm flex-column">
                    <li class="nav-item">
                      <a href="password-reset-cover.html" class="nav-link">
                        Cover
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="password-reset-illustration.html" class="nav-link">
                        Illustration
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="password-reset.html" class="nav-link">
                        Basic
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="nav-item">
                <a href="#sidebarError" class="nav-link" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarError">
                  Error
                </a>
                <div class="collapse" id="sidebarError">
                  <ul class="nav nav-sm flex-column">
                    <li class="nav-item">
                      <a href="error-illustration.html" class="nav-link">
                        Illustration
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="error.html" class="nav-link">
                        Basic
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#sidebarLayouts" data-toggle="collapse" role="button" aria-expanded="@@if(category=='layouts'&&page!=='index.html'){true}@@if(category!=='layouts'||category=='layouts'&&page=='index.html'){false}" aria-controls="sidebarLayouts">
            <i class="fe fe-layout"></i> Layouts
          </a>
          <div class="collapse @@if(category=='layouts'&&page!=='index.html'){show}" id="sidebarLayouts">
            <ul class="nav nav-sm flex-column">
              <li class="nav-item">
                <a href="index.html" class="nav-link">
                  Sidenav
                </a>
              </li>
              <li class="nav-item">
                <a href="dashboard-side-topnav.html" class="nav-link @@if(page=='dashboard-side-topnav.html'){active}">
                  Sidenav + top nav
                </a>
              </li>
              <li class="nav-item">
                <a href="dashboard-topnav.html" class="nav-link">
                  Topnav
                </a>
              </li>
              <li class="nav-item">
                <a href="#sidebarDashboard" class="nav-link" data-toggle="collapse" role="button" aria-expanded="@@if(subcategory=='dashboards'){true}@@if(subcategory!=='dashboards'){false}" aria-controls="sidebarDashboard">
                  Without hero chart
                </a>
                <div class="collapse @@if(subcategory=='dashboards'){show}" id="sidebarDashboard">
                  <ul class="nav nav-sm flex-column">
                    <li class="nav-item">
                      <a href="dashboard-no-hero.html" class="nav-link @@if(page=='dashboard-no-hero.html'){active}">
                        Sidenav
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="dashboard-side-topnav-no-hero.html" class="nav-link @@if(page=='dashboard-side-topnav-no-hero.html'){active}">
                        Sidenav + top nav
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="dashboard-topnav-no-hero.html" class="nav-link">
                        Topnav
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item d-md-none">
          <a class="nav-link" href="#sidebarModalActivity" data-toggle="modal">
           <span class="fe fe-bell"></span> Notifications
          </a>
        </li>
      </ul>

      <!-- Divider -->
      <hr class="my-3">

      <!-- Heading -->
      <h6 class="navbar-heading text-muted">
        Documentation
      </h6>

      <!-- Navigation -->
      <ul class="navbar-nav mb-md-3">
        <li class="nav-item">
          <a class="nav-link @@if(page=='getting-started.html'){active}" href="getting-started.html">
            <i class="fe fe-clipboard"></i> Getting started
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#sidebarComponents" data-toggle="collapse" role="button" aria-expanded="@@if(category=='components'){true}@@if( category!=='components'){false}" aria-controls="sidebarComponents">
            <i class="fe fe-book-open"></i> Components
          </a>
          <div class="collapse @@if(category=='components'){show}" id="sidebarComponents">
            <ul class="nav nav-sm flex-column">
              <li class="nav-item">
                <a href="components.html#alerts" class="nav-link">
                  Alerts
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#avatars" class="nav-link">
                  Avatars
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#badges" class="nav-link">
                  Badges
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#breadcrumb" class="nav-link">
                  Breadcrumb
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#buttons" class="nav-link">
                  Buttons
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#button-group" class="nav-link">
                  Button group
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#cards" class="nav-link">
                  Cards
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#charts" class="nav-link">
                  Charts
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#dropdowns" class="nav-link">
                  Dropdowns
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#forms" class="nav-link">
                  Forms
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#icons" class="nav-link">
                  Icons
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#lists" class="nav-link">
                  Lists
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#loaders" class="nav-link">
                  Loaders
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#modal" class="nav-link">
                  Modal
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#navs" class="nav-link">
                  Navs
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#navbar" class="nav-link">
                  Navbar
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#page-headers" class="nav-link">
                  Page headers
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#pagination" class="nav-link">
                  Pagination
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#popovers" class="nav-link">
                  Popovers
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#progress" class="nav-link">
                  Progress
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#social-posts" class="nav-link">
                  Social post
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#tables" class="nav-link">
                  Tables
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#tooltips" class="nav-link">
                  Tooltips
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#typography" class="nav-link">
                  Typography
                </a>
              </li>
              <li class="nav-item">
                <a href="components.html#utilities" class="nav-link">
                  Utilities
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link @@if(page=='changelog.html'){active}" href="changelog.html">
            <i class="fe fe-git-branch"></i> Changelog <span class="badge badge-primary ml-auto">v1.1.2</span>
          </a>
        </li>
      </ul>
      
      @@if(user!==false) {

      <!-- User (md) -->
      <div class="navbar-user mt-auto d-none d-md-flex">
        
        <!-- Icon -->
        <a href="#sidebarModalActivity" class="text-muted" data-toggle="modal">
          <span class="icon">
            <i class="fe fe-bell"></i>
          </span>
        </a>

        <!-- Dropup -->
        <div class="dropup">
          
          <!-- Toggle -->
          <a href="#!" id="sidebarIconCopy" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div class="avatar avatar-sm avatar-online">
              <img src="assets/img/avatars/profiles/avatar-1.jpg" class="avatar-img rounded-circle" alt="...">
            </div>
          </a>

          <!-- Menu -->
          <div class="dropdown-menu" aria-labelledby="sidebarIconCopy">
            <a href="profile-posts.html" class="dropdown-item">Profile</a>
            <a href="settings.html" class="dropdown-item">Settings</a>
            <hr class="dropdown-divider">
            <a href="sign-in.html" class="dropdown-item">Logout</a>
          </div>

        </div>

        <!-- Icon -->
        <a href="#sidebarModalSearch" class="text-muted" data-toggle="modal">
          <span class="icon">
            <i class="fe fe-search"></i>
          </span>
        </a>

      </div>
      }

    </div> <!-- / .navbar-collapse -->

  </div> <!-- / .container-fluid -->
</nav>